<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>QQ彩贝高级搜索</title>
		<style>
			h1,form,ul,li{margin: 0; padding: 0;}
li{list-style: none;}
.box{width: 200px; margin: auto;}
.search{border: 1px solid gray;}
.search h1{margin: 5px 10px; font-size: 22px; border-bottom: 5px solid red;}
.search form{margin: 25px 10px;}
.search li{margin-bottom: 15px;}
.search input{
	height: 30px;
}
#ul1 li:last-of-type input{margin-left: 65px;}
.ul2{
	width: 120px; margin: auto; margin-top: 15px;
}
select{color: gray;}
.ul2 li{
	margin-bottom: 5px;
}
.text{
	height: 150px;
	opacity: 0;
}
@keyframes spread{
	0%{height: 0px;}
	20%{height: 30px;}
	40%{height: 60px;}
	60%{height: 90px;}
	80%{height: 120px;}
	100%{height: 150px;}
}
.box:hover .text{
	opacity: 1;
	animation: spread 0.5s linear both;
}
.box:hover .search{border: none;}
.box:hover{border: 1px solid gray;}
		</style>
	<body>
		<div class="box">
			<div class="search">
				<h1>高级搜索</h1>
				<form action="" method="post">
					<ul id="ul1">
						<li><input type="search" name="" id="" value="" placeholder="请输入关键字"/></li>
						<li><input type="submit" name="" id="" value="搜索" /></li>
					</ul>
				</form>
			</div>
			<div class="text">
				<ul class="ul2">
					<li>
						<select name="">
							<option value="场合">场合</option>
						</select>
						<select name="">
							<option value="性别">性别</option>
						</select>
					</li>
					<li>
						<select name="">
							<option value="风格">风格</option>
						</select>
						<select name="">
							<option value="色系">色系</option>
						</select>
					</li>
					<li>
						<select name="">
							<option value="价格">价格</option>
						</select>
						<select name="">
							<option value="年龄">年龄</option>
						</select>
					</li>
					<li>
						<select name="">
							<option value="季节">季节</option>
						</select>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>